<template>
  <div class="classifyList">
    <div class="tit">
      {{ $t("m.classify") }}
    </div>
    <div class="con">
      <div
        class="item-con"
        v-for="item in classifyList"
        :key="item.id"
        @click="toClassify(item.id)"
      >
        <p>{{ item.name }}</p>
        <p>
          {{ $t("m.classify1") }}{{ item.children.length
          }}{{ $t("m.classify2") }}
        </p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      classifyList: [],
    };
  },
  created() {
    this.getClassifyList();
  },
  computed: {},
  methods: {
    getClassifyList() {
      this.$api.getClassifyList().then((res) => {
        if (res.success) {
          this.classifyList = res.data;
        }
      });
    },
    //  去分类
    toClassify(id) {
      this.$router.push("/layout/classify/" + id);
    },
  },
  components: {},
};
</script>
<style lang='scss' scoped>
@import "../assets/scss/_theme.scss";
.classifyList {
  width: 90%;
  margin: 0 auto;
  margin-top: 20px;
  background-color: #fff;
  @include background_color("background_color3");
  .tit {
    height: 40px;
    border-bottom: 1px solid #ccc;
    line-height: 40px;
    padding: 0 20px;
  }
  .con {
    padding: 0 20px;
    .item-con {
      display: flex;
      height: 40px;
      justify-content: space-between;
      align-items: center;
    }
    .item-con:hover {
      color: red;
    }
  }
}
</style>